<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>简易计算器</title>
  <style>
    :root {
      --primary-color: #4a6bdf;
      --primary-dark: #3a5bcf;
      --text-color: #333;
      --bg-color: #f5f5f5;
      --card-bg: #ffffff;
      --button-bg: #e9ecef;
      --button-hover: #ced4da;
      --button-text: #212529;
      --op-button-bg: #dee2e6;
      --op-button-hover: #adb5bd;
      --equal-button-bg: #4a6bdf;
      --equal-button-hover: #3a5bcf;
      --equal-button-text: white;
      --border-radius: 8px;
      --shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    
    * {
      box-sizing: border-box;
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }
    
    body {
      margin: 0;
      padding: 0;
      background-color: var(--bg-color);
      color: var(--text-color);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .calculator {
      background-color: var(--card-bg);
      border-radius: var(--border-radius);
      box-shadow: var(--shadow);
      width: 320px;
      overflow: hidden;
    }
    
    .display {
      background-color: var(--primary-color);
      color: white;
      padding: 20px;
      text-align: right;
      font-size: 32px;
      min-height: 80px;
      overflow: hidden;
      position: relative;
    }
    
    .history {
      font-size: 14px;
      opacity: 0.8;
      position: absolute;
      top: 10px;
      right: 20px;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    
    .current {
      margin-top: 10px;
    }
    
    .buttons {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background-color: #ddd;
    }
    
    button {
      border: none;
      font-size: 20px;
      height: 65px;
      background-color: var(--button-bg);
      color: var(--button-text);
      cursor: pointer;
      transition: background-color 0.2s;
    }
    
    button:hover {
      background-color: var(--button-hover);
    }
    
    .operator {
      background-color: var(--op-button-bg);
    }
    
    .operator:hover {
      background-color: var(--op-button-hover);
    }
    
    .equals {
      background-color: var(--equal-button-bg);
      color: var(--equal-button-text);
    }
    
    .equals:hover {
      background-color: var(--equal-button-hover);
    }
    
    .zero {
      grid-column: span 2;
    }
  </style>
</head>
<body>
  <div class="calculator">
    <div class="display">
      <div class="history" id="history"></div>
      <div class="current" id="current">0</div>
    </div>
    <div class="buttons">
      <button class="operator" onclick="clearDisplay()">C</button>
      <button class="operator" onclick="backspace()">⌫</button>
      <button class="operator" onclick="appendToDisplay('%')">%</button>
      <button class="operator" onclick="appendToDisplay('/')">÷</button>
      
      <button onclick="appendToDisplay('7')">7</button>
      <button onclick="appendToDisplay('8')">8</button>
      <button onclick="appendToDisplay('9')">9</button>
      <button class="operator" onclick="appendToDisplay('*')">×</button>
      
      <button onclick="appendToDisplay('4')">4</button>
      <button onclick="appendToDisplay('5')">5</button>
      <button onclick="appendToDisplay('6')">6</button>
      <button class="operator" onclick="appendToDisplay('-')">−</button>
      
      <button onclick="appendToDisplay('1')">1</button>
      <button onclick="appendToDisplay('2')">2</button>
      <button onclick="appendToDisplay('3')">3</button>
      <button class="operator" onclick="appendToDisplay('+')">+</button>
      
      <button class="zero" onclick="appendToDisplay('0')">0</button>
      <button onclick="appendToDisplay('.')">.</button>
      <button class="equals" onclick="calculate()">=</button>
    </div>
  </div>

  <script>
    // 获取SDK
    const AppSDK = window.AppSDK || {};
    
    // 元素引用
    const currentElement = document.getElementById('current');
    const historyElement = document.getElementById('history');
    
    // 状态
    let currentDisplay = '0';
    let lastResult = null;
    let shouldResetDisplay = false;
    
    // 初始化
    async function init() {
      // 尝试从存储加载状态
      await loadState();
    }
    
    // 添加数字或运算符到显示
    function appendToDisplay(value) {
      // 如果需要重置（计算后）
      if (shouldResetDisplay) {
        if (['+', '-', '*', '/', '%'].includes(value)) {
          // 如果按下运算符，使用上次结果继续计算
          currentDisplay = lastResult.toString();
          historyElement.textContent = lastResult.toString();
        } else {
          // 如果按下数字，开始新的计算
          currentDisplay = '0';
          historyElement.textContent = '';
        }
        shouldResetDisplay = false;
      }
      
      // 处理第一个字符是0的情况
      if (currentDisplay === '0') {
        if (value === '.') {
          // 允许小数点
          currentDisplay = '0.';
        } else if (!['+', '-', '*', '/', '%'].includes(value)) {
          // 数字替换0
          currentDisplay = value;
        } else {
          // 运算符前面加0
          currentDisplay = '0' + value;
        }
      } else {
        // 防止多个运算符和小数点
        const lastChar = currentDisplay.slice(-1);
        if (['+', '-', '*', '/', '.', '%'].includes(lastChar) && ['+', '-', '*', '/', '.', '%'].includes(value)) {
          // 替换最后一个运算符
          currentDisplay = currentDisplay.slice(0, -1) + value;
        } else {
          // 追加到显示
          currentDisplay += value;
        }
      }
      
      updateDisplay();
      saveState();
    }
    
    // 清除显示
    function clearDisplay() {
      currentDisplay = '0';
      historyElement.textContent = '';
      lastResult = null;
      shouldResetDisplay = false;
      updateDisplay();
      saveState();
    }
    
    // 退格
    function backspace() {
      if (shouldResetDisplay) {
        clearDisplay();
        return;
      }
      
      if (currentDisplay.length === 1) {
        currentDisplay = '0';
      } else {
        currentDisplay = currentDisplay.slice(0, -1);
      }
      updateDisplay();
      saveState();
    }
    
    // 计算结果
    function calculate() {
      try {
        // 显示历史
        historyElement.textContent = currentDisplay;
        
        // 替换UI显示符号为JavaScript运算符
        let expression = currentDisplay;
        
        // 计算结果
        lastResult = eval(expression);
        
        // 处理除以零错误
        if (!isFinite(lastResult)) {
          currentDisplay = '错误';
        } else {
          // 格式化结果，避免浮点数精度问题
          currentDisplay = formatResult(lastResult);
        }
        
        // 标记为已计算
        shouldResetDisplay = true;
        updateDisplay();
        saveState();
      } catch (error) {
        currentDisplay = '错误';
        updateDisplay();
      }
    }
    
    // 格式化结果，避免浮点数精度问题
    function formatResult(result) {
      // 如果是整数，不显示小数点
      if (Number.isInteger(result)) {
        return result.toString();
      }
      
      // 限制小数位数，避免浮点数精度问题
      return parseFloat(result.toFixed(10)).toString();
    }
    
    // 更新显示
    function updateDisplay() {
      currentElement.textContent = currentDisplay;
    }
    
    // 保存状态
    function saveState() {
      if (AppSDK.setData) {
        AppSDK.setData('calculator', {
          currentDisplay,
          historyText: historyElement.textContent,
          lastResult,
          shouldResetDisplay
        });
      }
    }
    
    // 加载状态
    async function loadState() {
      if (AppSDK.getData) {
        try {
          const state = await AppSDK.getData('calculator');
          if (state) {
            currentDisplay = state.currentDisplay || '0';
            historyElement.textContent = state.historyText || '';
            lastResult = state.lastResult;
            shouldResetDisplay = state.shouldResetDisplay || false;
            updateDisplay();
          }
        } catch (error) {
          console.error('加载状态失败:', error);
        }
      }
    }
    
    // 初始化应用
    init();
  </script>
</body>
</html> 